<style>
	section img {
		width: 200px;
		height: 241px;
	}
	
	#console {
		display: none;
	}
	
	.row {
		margin-top: 10px;
		display: none;
	}
	
	canvas {
		margin: 10px;
	}
</style>
<form id="uface">
	<%=locals.param1%>
	<div class="form-group">
		<div class="col-xs-2"><label>File input</label></div>
		<div class="col-xs-10">
			<input type="file" name="photo" id="upload" accept="image/png,image/jpg,image/gif,image/jpeg">
			<p class="help-block">Upload your photo.</p>
		</div>
	</div>
	<button type="button" class="btn btn-primary" onclick="uploadImg()">Submit</button>
</form>

<div id="console">
	<p>Console</p>
	<div>
		<label>Width</label> <input name="width" value="<%=locals.face.width%>" />
	</div>
	<div>
		<label>Height</label> <input name="height" value="<%=locals.face.height%>" />
	</div>
	<div>
		<label>X</label> <input name="x" value="<%=locals.face.x%>" />
	</div>
	<div>
		<label>Y</label> <input name="y" value="<%=locals.face.y%>" />
	</div>
	<div>
		<button onclick="_switch()">Switch</button>
	</div>
</div>
<div class="row" id="face-panel">
	<div class="col-sm-6 col-md-4">
		<div class="thumbnail">
			<canvas id="canvas" width="395" height="476" class="img-rounded"></canvas>
			<div class="caption">
				<p>Dog Face</p>
			</div>
		</div>
	</div>
	<div class="col-sm-3 col-md-2">
		<div class="thumbnail">
			<canvas id="canvas1" width="<%=locals.face.width%>" height="<%=locals.face.height%>" class="img-rounded"></canvas>
			<div class="caption">
				<p>Your Face</p>
			</div>
		</div>
	</div>
</div>
<div class="row" id="model-panel">
	<div class="col-sm-6 col-md-4">
		<img id="target" />
	</div>
	<div class="col-sm-6 col-md-4">
		<img id="jz" src="/img/face/<%=locals.face.img%>" onerror="this.src=''" />
	</div>
	<!--<img style="display: none;" id="jz" src="/images/_timg.png" />-->
	<script type="text/javascript">
		<%
		if(locals.console==true){
		%>
		$(function() {
			$("#model-panel").show();
			$("#console").show();
		})
		<%
		}
		%>

		function _switch() {
			var width = $("[name=width]").val();
			var height = $("[name=height]").val();
			var x = $("[name=x]").val();
			var y = $("[name=y]").val();
			createFace({
				width: width,
				height: height,
				x: x,
				y: y
			})
		}

		function uploadImg() {
			if($("#upload").val() == "") {
				return;
			}
			var formData = new FormData();
			formData.append("photo", $("#upload")[0].files[0]);
			var reader = new FileReader();
			reader.onload = function(e) {
				$('#target')[0].src = e.target.result;
			};
			reader.readAsDataURL($("#upload")[0].files[0]);
			$.ajax({
				type: 'POST',
				url: '/face/upload',
				data: formData,
				processData: false,
				contentType: false,
				success: function(res) {
					var json = JSON.parse(res);
					createFace({
						json: json
					});
					//从后端获取到人脸检测到结果后，调用createFace函数，进行图片合成  
				}
			});
		};

		function createFace(opts) {
			opts = opts || {};
			var jzimg = $('#jz')[0];
			var img = $('#target')[0];
			var canvas = $('#canvas')[0];
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, 1000, 1000);
			var json = opts.json || {}

			var sx = 272,
				sy = 129,
				swidth = 116,
				sheight = 113;
			if(opts.json) {
				sx = json.result[0].location.left || 272;
				sy = (json.result[0].location.top || 129) - 10;
				swidth = json.result[0].location.width || 116;
				sheight = (json.result[0].location.height || 113) + 10;
			}

			var width = opts.width || <%=locals.face.width%>,
				height = opts.height || <%=locals.face.height%>,
				x = opts.x || <%=locals.face.x%>,
				y = (opts.y || <%=locals.face.y%>) - 10;
			{
				var ctx1 = $('#canvas1')[0].getContext('2d');
				ctx1.drawImage(img, sx, sy, swidth, sheight, 0, 0, width, height);
			}
			ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
			ctx.globalCompositeOperation = 'source-over';
			ctx.drawImage(jzimg, 0, 0);
			$("#face-panel").show();
			//globalCompositeOperation = 'source-over';  这个是用来把抠出来到人脸，合成到军装里到关键设置，可以合成任意到图片，并保留图片到透明信息哦。 相当于ps里的图层叠加概念
		};
		$(document).ready(function() {
			var image = new Image();
			image.src = $("#jz").attr("src");

			var canvas = $('#canvas')[0];
			canvas.width = image.width;
			canvas.height = image.height;
		});
	</script>